<template>
	<view>
		<view class="cu-list menu card-menu margin-top">
			<view class="cu-item" v-for="(item,index) in deviceResList" :key="index">
				<view class="content">
					<text class="text-grey" :class="item.status?'cuIcon-appreciatefill':'cuIcon-info'"></text>
					<text class="text-grey">{{item.deviceCore}}<text class="margin-left-sm">{{item.msg}}</text></text>
				</view>
				<view class="action">
					<button class="cu-btn bg-red shadow margin-right-sm">
						<text class="cuIcon-delete" @tap="deleteDeviceRes(item)">
						</text>
					</button>
					<button v-if="item.retryItem" class="cu-btn shadow"
						:style="[{backgroundColor:themeConfig.primaryColor}]" style="color: #fff;">
						<text class="cuIcon-refresh"
							@tap="send(item.retryItem.deviceCore, item.retryItem.value, item.retryItem.keyName, item.retryItem.port)">
						</text>
					</button>
				</view>
			</view>
			<view class="margin-sm">
				<view v-for="(sensor,sensorIndex) in sensorWithSetting" :key="sensorIndex">
					<view v-if="sensor.settingList.length != 0" class="text-grey text-lg">
						<view class="action margin-bottom-sm flex justify-between" @click="tapSensor(sensor)">
							<view>
								<text class="cuIcon-titles text-green"></text>
								<text class="text-bold margin-right-sm">{{$t('port')}}:{{sensor.port}}</text>
							</view>
							<text v-if="showGoToSensor" class="cuIcon-right text-black text-xl"
								style="float: right;margin-top: 10rpx;"></text>
						</view>
						<view
							style="display: grid;grid-template-columns:1fr 1fr;grid-template-rows 1fr 1fr;grid-column-gap: 5px;">
							<view v-for="(item,index) in sensor.settingList" :key="index"
								:style="(item.isFullLine || !showGoToSensor ? 'grid-column-start: span 2':'grid-column-start: span 1')">
								<view class="bg-white padding-sm margin-bottom-sm common-box">
									<view class="flex justify-start">
										<view class="cu-avatar radius sm"
											:style="[{backgroundImage:`url(${item.iconUrl})`}]"
											style="width: 55rpx;height: 55rpx;background-color:rgba(0,0,0,0);;margin: 5rpx 8rpx 0 0;">
										</view>
										<view>
											<view class="text-sm text-bold text-grey text-left">
												<text v-if="item.remark && item.remark!==''">
													{{item.remark}}
												</text>
												<text v-else>
													{{item.name}}
												</text>
											</view>
											<view class="text-gray text-xs">
												{{formatDateTime(item.updateDate)}}
											</view>
										</view>
									</view>
									<view class="margin-top-sm">
										<view v-if="item.type==='fixedParam' && item.paramList.length > 0">
											<!-- 固定参数 -->
											<view class="flex justify-end flex-wrap">
												<button v-for="(param,paramIndex) in item.paramList" :key="paramIndex"
													:disabled="item.disabled"
													class="margin-right-sm margin-bottom-sm cu-btn block" size="mini"
													:class="[item.value == param.value ? 'selectButton' : 'noSelectButton']"
													:style="{'--color': themeConfig.primaryColor}" @tap="changeParam"
													:data-keyName="item.keyName" :data-port="item.port"
													:data-value="param.value"
													data-type="fixed">{{param.name + item.unit}}</button>

											</view>
										</view>
										<view v-else-if="item.type==='switch'">
											<!-- 开关量 -->
											<view class="flex justify-end ztnCustom-custominput">
												<switch :class="[themeConfig.theme,item.value?'checked':'']"
													class="sm radius" :disabled="item.disabled" :checked="item.value"
													@change="changeParam" :data-keyName="item.keyName"
													:data-port="item.port" data-type='switch'></switch>
											</view>
										</view>
										<view v-else-if="item.type==='time'">
											<!-- 定时设置 -->
											<view class='flex justify-end'>
												<picker :disabled="item.disabled" mode="time" :value="item.value"
													@change="changeParam" :data-keyName="item.keyName"
													:data-port="item.port" data-type='time'
													:style="{'--color': themeConfig.primaryColor}"
													class="cu-btn block selectButton setting-border">
													<view style="color: #FFF">
														<text class="cuIcon-time margin-right-sm" />
														<text>{{item.value}}</text>
													</view>
												</picker>
											</view>
										</view>
										<view v-else-if="item.type==='timeSlot'">
											<!-- 时间段设置 -->
											<view class='flex justify-end'>
												<picker :disabled="item.disabled" mode="multiSelector"
													@change="changeParam" :data-keyName="item.keyName"
													:data-port="item.port" data-type='timeSlot'
													:value="item.timeSlotMultiIndex" :range="timeSlotMultiArray"
													:style="{'--color': themeConfig.primaryColor}"
													class="cu-btn block selectButton setting-border">
													<view style="color: #FFF">
														<text class="cuIcon-time margin-right-sm" />
														<text>{{item.value}}</text>
													</view>
												</picker>
											</view>
										</view>
										<view v-else-if="item.type==='noParam'">
											<!-- 无参数命令 -->
											<view class='flex justify-end'>
												<button :disabled="item.disabled" class="cu-btn block" size="mini"
													:style="[{backgroundColor:themeConfig.primaryColor}]"
													style="color: #fff" @tap="changeParam" :data-keyName="item.keyName"
													:data-port="item.port"
													data-type='noParam'>{{$t('confirm')}}</button>
											</view>
										</view>
										<view v-else-if="item.type==='slider'">
											<!-- 拖动条 -->
											<view class='flex justify-end' style="margin-left:120rpx">
												<slider :disabled="item.disabled" class="flex-sub" show-value max="100"
													min="0" step="1" :value="item.value"
													:activeColor="themeConfig.primaryColor" block-size="20"
													@change="changeParam" :data-keyName="item.keyName"
													:data-port="item.port" data-type="slider"></slider>
											</view>
										</view>
										<view v-else-if="item.type==='video'">
											<!-- 其他 -->
											<form @submit="changeParam" :data-keyName="item.keyName"
												:data-port="item.port" :data-type="item.type">
												<view class="flex align-center justify-end ">
													<input :disabled="item.disabled"
														class=" margin-right-sm ztnCustom-custominput flex-sub setting-border"
														style="color: #8799a3" type='text' name="custom"
														:value="item.value" />
													<text class='text-orange margin-right-sm'
														v-if="item.unit">{{item.unit}}</text>
													<button :disabled="item.disabled" class="cu-btn block" size="mini"
														:style="{backgroundColor:themeConfig.primaryColor}"
														style="color: #fff;" hover-class="btn-hover-class"
														form-type="submit">{{$t('play')}}</button>
												</view>
											</form>
										</view>
										<view v-else-if="item.type==='multiCustom'">
											<!-- 富自定义 -->
											<form @submit="changeParam" :data-keyName="item.keyName"
												:data-port="item.port" data-type="multiCustom">
												<view class="flex justify-end flex-wrap ">
													<view v-for="(param,paramIndex) in item.valueList" :key="paramIndex"
														class="margin-right-sm margin-bottom-sm">
														<view v-if="param.type==='fixedParam'">
															<!-- 固定参数 -->
															<picker :disabled="item.disabled"
																@change="multiCustomFixedParamChange($event,item,param)"
																:value="param.valueIndex" :range="item.paramList"
																range-key="name">
																<view
																	class="picker ztnCustom-custominput setting-border"
																	style="color: #8799a3;width: 240rpx;">
																	{{item.paramList[param.valueIndex]['name'] + item.unit}}
																</view>
															</picker>
														</view>
														<view v-else-if="param.type==='switch'">
															<!-- 开关量 -->
															<switch :class="themeConfig.theme"
																class="sm ztnCustom-custominput radius"
																:disabled="item.disabled" :checked="param.value">
															</switch>
														</view>
														<view v-else-if="param.type==='time'">
															<!-- 定时设置 -->
															<picker :disabled="item.disabled" class="flex-sub"
																mode="time" :value="item.value"
																@change="multiCustomTimeChange($event,param)">
																<view class="ztnCustom-custominput setting-border"
																	style="color: #8799a3;width: 120rpx;">
																	{{param.value}}
																</view>
															</picker>
														</view>
														<view v-else-if="param.type==='timeSlot'">
															<!-- 时间段设置 -->
															<picker :disabled="item.disabled" class="flex-sub"
																mode="multiSelector" :value="param.timeSlotMultiIndex"
																:range="timeSlotMultiArray"
																@change="multiCustomTimeSlotChange($event,param)">
																<view class="ztnCustom-custominput setting-border"
																	style="color: #8799a3;width: 240rpx;">
																	{{param.value}}
																</view>
															</picker>
														</view>
														<view v-else-if="param.type==='slider'">
															<!-- 拖动条 -->
															<slider style="width: 300rpx;" :disabled="item.disabled"
																@change="multiCustomSliderChange($event,param)"
																class="flex-sub" show-value max="100" min="0" step="1"
																:value="param.value"
																:activeColor="themeConfig.primaryColor" block-size="20">
															</slider>
														</view>
														<view v-else-if="param.type==='video'">
															<input :disabled="item.disabled"
																class="ztnCustom-custominput setting-border"
																style="width: 120rpx;color: #8799a3" type='text'
																name="custom" v-model="param.value" />
															<text class='text-orange margin-right-sm'
																v-if="item.unit &&item.unit!==''">{{item.unit}}</text>
														</view>
														<view v-else>
															<input :disabled="item.disabled"
																class="ztnCustom-custominput setting-border"
																style="width: 120rpx;color: #8799a3" type='text'
																name="custom" v-model="param.value" />
															<text class='text-orange margin-right-sm'
																v-if="item.unit &&item.unit!==''">{{item.unit}}</text>
														</view>
													</view>
													<button :disabled="item.disabled" class="cu-btn block" size="mini"
														:style="[{backgroundColor:themeConfig.primaryColor}]"
														style="color: #fff;" hover-class="btn-hover-class"
														form-type="submit">{{$t('confirm')}}</button>
												</view>
											</form>
										</view>
										<view v-else>
											<!-- 其他 -->
											<form @submit="changeParam" :data-keyName="item.keyName"
												:data-port="item.port" :data-type="item.type">
												<view class="flex align-center justify-end ">
													<input :disabled="item.disabled"
														class="margin-right-sm ztnCustom-custominput flex-sub setting-border"
														style="color: #8799a3" type='text' name="custom"
														:value="item.value" />
													<text class='text-orange margin-right-sm'
														v-if="item.unit">{{item.unit}}</text>
													<button :disabled="item.disabled" class="cu-btn block" size="mini"
														:style="{backgroundColor:themeConfig.primaryColor}"
														style="color: #fff;" hover-class="btn-hover-class"
														form-type="submit">{{$t('confirm')}}</button>
												</view>
											</form>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showLoading,
		hideLoading
	} from '@/util/toast.js'
	import {
		formatSettingList
	} from '@/util/utils.js'
	import * as iotDeviceSettingApi from '@/api/iot/iotDeviceSettingApi.js'
	import {
		formatDateTime
	} from '@/util/formatTime.js'
	const hours = [];
	const minutes = [];
	const thours = [];
	const tminutes = [];
	for (let i = 0; i < 24; i++) {
		let n = i + ''
		hours[i] = n[1] ? n : '0' + n
	}
	for (let i = 0; i < 60; i++) {
		let n = i + ''
		minutes[i] = n[1] ? n : '0' + n
	}
	for (let i = 0; i < 24; i++) {
		let n = i + ''
		thours[i] = n[1] ? n : '0' + n
	}
	for (let i = 0; i < 60; i++) {
		let n = i + ''
		tminutes[i] = n[1] ? n : '0' + n
	}
	export default {
		name: 'CommonSetting',
		props: {
			deviceCoreList: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		data() {
			return {
				sensorWithSetting: [],
				timeSlotMultiArray: [hours, minutes, thours, tminutes],
				deviceResList: []
			}
		},
		mounted() {
			const deviceResList = []
			this.deviceCoreList.forEach(deviceCore => {
				deviceResList.push({
					deviceCore: deviceCore,
					status: null,
					msg: ''
				})
			})
			this.deviceResList = deviceResList
			this.commonGroupByPortDeviceList()

		},
		methods: {
			formatDateTime(time) {
				return formatDateTime(time, this.$t('unKnow'))
			},
			commonGroupByPortDeviceList() {
				iotDeviceSettingApi.commonGroupByPortDeviceList({
					deviceCoreList: this.deviceCoreList
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						const sensorWithSetting = []
						data.forEach(sensor => {
							if (this.showHidden || !sensor.hidden) {
								if (!sensor.settingList) {
									return
								}
								const settingList = []
								sensor.settingList.forEach(setting => {
									if (this.showHidden || !setting.hidden) {
										settingList.push(setting)
									}
								})
								sensor.settingList = formatSettingList(settingList)
								if (sensor.settingList.length > 0) {
									sensorWithSetting.push(sensor)
								}
							}
						})
						this.sensorWithSetting = sensorWithSetting
					}
				})
			},
			multiCustomFixedParamChange(e, item, param) {
				param.valueIndex = e.detail.value
				param.value = item.paramList[e.detail.value].value
			},
			multiCustomTimeChange(e, param) {
				param.value = e.detail.value
			},
			multiCustomSliderChange(e, param) {
				param.value = e.detail.value
			},
			multiCustomTimeSlotChange(e, param) {
				let index = e.detail.value;
				let hour = this.timeSlotMultiArray[0][index[0]]
				let minute = this.timeSlotMultiArray[1][index[1]]
				let thour = this.timeSlotMultiArray[2][index[2]]
				let tminute = this.timeSlotMultiArray[3][index[3]]
				let timeSlot = hour + ':' + minute + ' / ' + thour + ':' + tminute
				param.value = timeSlot
			},
			changeParam(e) {
				const data = e.currentTarget.dataset
				const change = data.change
				const keyName = data.keyname
				const port = data.port

				switch (change) {
					case 'fixed':
						this.sendSetting(data.value, keyName, port)
						break;
					case 'switch':
						const switchValue = e.detail.value ? '1' : '0'
						this.sendSetting(switchValue, keyName, port)
						break;
					case 'time':
						this.sendSetting(e.detail.value, keyName, port)
						break;
					case 'timeSlot':
						const index = e.detail.value;
						const hour = this.timeSlotMultiArray[0][index[0]]
						const minute = this.timeSlotMultiArray[1][index[1]]
						const thour = this.timeSlotMultiArray[2][index[2]]
						const tminute = this.timeSlotMultiArray[3][index[3]]
						const timeSlot = hour + ':' + minute + ' / ' + thour + ':' + tminute
						this.sendSetting(timeSlot, keyName, port)
						break;
					case 'noParam':
						this.sendSetting(null, keyName, port)
						break;
					case 'slider':
						this.sendSetting(e.detail.value, keyName, port)
						break;
					case 'multiCustom':
						let multiCustomValue = ''
						data.valueList.forEach(p => {
							if (p.type === 'switch') {
								multiCustomValue = multiCustomValue + (p.value ? '1' : '0') + ','
							} else {
								multiCustomValue = multiCustomValue + p.value + ','
							}

						})
						multiCustomValue = multiCustomValue.slice(0, multiCustomValue.length - 1)
						this.sendSetting(multiCustomValue, keyName, port)
						break
					default:
						const customValue = e.detail.value.custom
						this.sendSetting(customValue, keyName, port)
				}
			},
			sendSetting(value, keyName, port) {
				showLoading(this.$t('loading'), true)
				this.deviceResList.forEach(deviceRes => {
					this.send(deviceRes.deviceCore, value, keyName, port)
				})
				hideLoading()
			},
			send(deviceCore, value, keyName, port) {
				iotDeviceSettingApi.sendSetting({
					deviceCore: deviceCore,
					value: value,
					keyName: keyName,
					port: port
				}).then((
					res) => {
					if (data) {
						for (const i in this.deviceResList) {
							if (this.deviceResList[i].deviceCore === deviceCore) {
								this.deviceResList.splice(i, 1, {
									deviceCore: deviceCore,
									status: true,
									msg: this.$t('success')
								})
							}
						}
					} else {
						for (const i in this.deviceResList) {
							if (this.deviceResList[i].deviceCore === deviceCore) {
								this.deviceResList.splice(i, 1, {
									deviceCore: deviceCore,
									status: false,
									msg: res.msg,
									retryItem: {
										deviceCore,
										value,
										keyName,
										port
									}
								})
							}
						}
					}
				})
			},
			deleteDeviceRes(item) {
				for (const i in this.deviceResList) {
					if (this.deviceResList[i].deviceCore === item.deviceCore) {
						this.deviceResList.splice(i, 1)
					}
				}
			}
		},
	}
</script>
<style scoped>
	.ztnCustom-custominput {
		text-align: center;
		height: 64rpx;
		line-height: 64rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}



	.selectButton {
		color: #fff;
		background-color: var(--color)
	}

	.noSelectButton {
		color: #8799a3;
		background-color: #efefef
	}
</style>
